<%-- 
    Document   : view_quizzes
    Created on : Jan 4, 2013, 3:32:55 PM
    Author     : Vuong Pham<Vuong.Pham@hva.nl>
--%>
<%@page import="classes.HibernateUtil"%>
<%@page import="dao.QuizAnswersDao"%>
<%@page import="models.Answers"%>
<%@page import="java.util.ArrayList"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="template/configuration.jsp" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>${website} || Take quiz</title>
        ${stylesheet}
        ${jquery}
        ${jsdropdown}
    </head>
    <body>
        <div class="container">
            <%@include file="template/header.jsp" %>
            <div class="content">
                <c:choose>
                    <c:when test="${question != null}">       
                        <h1>Quiz: ${question.quiz.name}</h1>
                        Question: ${question.order}/${quizsize} | Progress: <fmt:formatNumber type="percent" pattern="###" value="${((question.order - 1) / quizsize) * 100}" />%
                        <div class="progressbar">
                            <div class="progress-active" style="width: ${(798 / quizsize) * question.order}px;"></div>
                            <div class="progress" style="width: ${(798 / quizsize) * (question.order - 1)}px;"></div>
                        </div>

                        <div class="clear margin-bottom-20"></div>
                        <div class="full-block">

                            <form action="TakeQuiz" method="POST" name="Question">
                                <h4 class="search">${question.name}</h4>
                                <div id="quiz-answers">
                                    <c:set var="i" value="0" />
                                    <c:forEach var="option" items="${answers}">
                                        <input type="radio" name="correct" value="${option.id}" id="answerq-${option.id}" <c:if test="${i == 0}">checked</c:if>> <label for="answerq-${option.id}">${option.value}</label>
                                        <div class="clear"></div>
                                        <c:set var="i" value="${i + 1}" />
                                    </c:forEach>
                                </div>

                                <input type="hidden" name="Questionnumber" value="${question.id}"/>
                                <input type="hidden" name="quiz" value="${question.quiz.id}"/>
                                <center><input type="submit" value="Confirm"></center>
                        </div>
                    </c:when>
                    <c:otherwise>
                        <h1>Results quiz: ${quiz.name}</h1>
                        Your scored ${right} out of ${total}
                        <div class="progressbar">
                            <div class="progress-active red" style="width: 798px;"></div>
                            <div class="progress" style="width: ${(798 / total) * (right)}px;"></div>
                        </div>
                        <%
                            HibernateUtil hutil = new HibernateUtil();
                            QuizAnswersDao qad = new QuizAnswersDao(hutil.openSession());
                            int counter = 0;
                            ArrayList<Answers> ownAnswers = (ArrayList<Answers>) request.getAttribute("ownAnswers");
                            ArrayList<Answers> correctAnswers = (ArrayList<Answers>) request.getAttribute("correctAnswers");
                        %>
                        <div class="clear margin-bottom-20"></div>
                        <div class="full-block">
                            <h4 class="search">Overview results of quiz</h4>
                            <table>
                                <tr>
                                    <c:forEach var="question" items="${allquestions}">
                                        <% if (counter % 2 == 0 && counter != 0) { %>
                                </tr>
                                <tr>
                                        <% } counter++; %>
                                        <td width="50%" style="padding: 10px; vertical-align: top;">
                                            <table class="quiz-results">
                                                <tr>
                                                    <td>Question ${question.order}:</td>
                                                    <td>${question.name}</td>
                                                </tr>
                                                <tr>
                                                    <td>Your answer:</td>
                                                    <td style="color: <% if (ownAnswers.get(counter - 1).getValue() == correctAnswers.get(counter - 1).getValue()) { %>#A9B936<% } else { %>#ED5140<% } %>;">
                                                        <%=ownAnswers.get(counter - 1).getValue()%>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>Correct answer:</td>
                                                    <td><%=correctAnswers.get(counter - 1).getValue()%></td>
                                                </tr>
                                                <tr>
                                                    <td>Explanation:</td>
                                                    <td>${question.explanation}</td>
                                                </tr>
                                            </table>
                                        </td>
                                    </c:forEach>                 
                            </table>
                            <center>
                                <div style="font-size: 16px; margin-bottom: 10px;">
                                    <div style="color: #1a344b; font-size: 18px;">You have answered <strong>${right}</strong> correctly out of <strong>${total}</strong></div>
                                    <c:choose>
                                        <c:when test="${right == total}">
                                            Excellent job!
                                        </c:when>
                                        <c:when test="${(right / total * 100) > 75}">
                                            Very good job!
                                        </c:when>
                                        <c:when test="${(right / total * 100) > 55}">
                                            Great job.
                                        </c:when>
                                        <c:when test="${(right / total * 100) > 45}">
                                            Next time better.
                                        </c:when>
                                        <c:otherwise>
                                            Ayy, you have to study a little more...
                                        </c:otherwise>
                                    </c:choose>
                                </div>
                            </center>
                         </div>
                    </c:otherwise>                    
                </c:choose>


            </div>
            <%@include file="template/footer.jsp" %>
        </div>
    </body>
</html>